<template>
<div style="width: 100%;height: 100vh;background-color:slateblue ;overflow: hidden">
  <div style="width: 400px;margin: 150px auto">
    <div style="color: #cccccc;font-size: 30px;text-align: center;padding: 30px 0">欢迎登陆</div>
    <el-form ref="from" :model="form" size="normal"  :rules="rules" >
      <el-form-item prop="username">
        <el-input  :prefix-icon="Avatar" v-model="form.username" ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input :prefix-icon="Lock" v-model="form.password" show-password></el-input>
      </el-form-item>
      <el-form-item prop="validCode">
        <div style="display: flex">
          <el-input :prefix-icon="Key" v-model="form.validCode" style="width: 50%" placeholder="请输入验证码"></el-input>
          <ValidCode @input="createValidCode"></ValidCode>
        </div>
      </el-form-item>
      <el-form-item >
      <el-radio v-model="form.role" :label="1" style="color: #cccccc">管理员</el-radio>
      <el-radio v-model="form.role" :label="2" style="color: #cccccc">普通用户</el-radio>
    </el-form-item>
      <el-form-item >
        <el-button style="width: 100%" type="primary" @click="login">登录</el-button>
      </el-form-item>
      <el-form-item><el-button type="text" @click="$router.push('/register')">前往注册 >> </el-button></el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import ValidCode from "@/components/ValidCode";
export default {
	name: 'login',
  components:{
    ValidCode
  },
  data(){
    return{
      form:{role:1},
      validCode:'',
      rules:{
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
        ],
        validCode:[
          {
            required:true,
            message:'请输入验证码',
            trigger:'blur',
          },
        ],
      }
    }
  },
  methods:{
    //接受验证码组件提交的4位验证码
    createValidCode(data){
      this.validCode=data
    },
    login(){//检测输入的内容是否合法，只有合法的时候才能发送请求
      this.$refs['from'].validate((valid) =>{
        if(valid){
          // toLowerCase-----对验证码小写处理
          if(this.form.validCode.toLowerCase()!==this.validCode.toLowerCase()){
            ElMessage({
              message:'验证码错误',
              center: true,
              type: 'warning',
            })
          }else {
            request.post("/user/login",this.form).then(res =>{
              console.log(res);
              if (res.code === '0') {
                ElMessage({
                  message: '登录成功',
                  type: 'success',
                  center: true,
                  duration:2000,
                })
                sessionStorage.setItem("user",JSON.stringify(res.data))//缓存用户信息
                this.$router.push("/")//登录成功跳转到主页
              } else {
                ElMessage({
                  message: res.msg,
                  type: 'warning',
                  center: true,
                  duration:2000,
                });
              }
            })
          }
        }
      })
    }
  },
};
</script>
<script setup>
import {Avatar,Key} from "@element-plus/icons-vue";
import {Lock} from "@element-plus/icons-vue";
</script>
<style></style>
